{extend name="base" /}
{block name="body"}
<style>
    #tableTbImg + .layui-table-view .layui-table-body tbody > tr > td {
        padding: 0;
    }

    #tableTbImg + .layui-table-view .layui-table-body tbody > tr > td > .layui-table-cell {
        height: 146px;
        line-height: 146px;
    }

    .tdImg {
        width: 40px;
        height: 40px;
        cursor: zoom-in;
        border-radius: 10%;
        border: 2px solid #dddddd;
    }
</style>

<div class="layui-col-sm12 layui-col-md12 layui-col-lg12">
    <div class="layui-card">
        <!--搜索栏-->
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <form action="{:url('admin/manager/index')}" class="layui-form" method="get">
                <div class="layui-form-item">
                    <label class="col-sm-4 control-label">账号：</label>
                    <div class="layui-inline">
                        <input type="text" id="username" name="username" value="{:input('username')}"
                               autocomplete="off" placeholder="请输入账号" class="layui-input"/>
                    </div>

                    <div class="layui-inline">
                        <button id="myfrom" class="layui-btn layuiadmin-btn-admin ajax-search" lay-submit
                                lay-filter="LAY-user-back-search">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <div class="layui-card-body">

            <!-- 头部操作列 -->
            <div style="padding-bottom: 10px;">
                <a href="{:url('admin/manager/del')}" class="layui-btn layui-bg-red ajax-all-delete"><i
                        class="layui-icon layui-icon-delete"></i>删除</a>
                <a href="{:url('admin/manager/add')}" class="layui-btn"><i class="layui-icon layui-icon-add-1"></i>添加管理员</a>
            </div>

            <!--表格主体-->
            <table id="tableList" lay-filter="tableList" lay-href="{:url('admin/manager/edit')}" ></table>

            <!-- 表格操作列 -->
            <script type="text/html" id="tableTBTrack">
                {{#  if(d.role_id != 1){ }}
                <a href="{:url('admin/manager/edit')}?id={{d.id}}" class="layui-btn layui-btn-sm"><i
                        class="layui-icon layui-icon-edit"></i>修改</a>
                <a href="{:url('admin/manager/del')}?id={{d.id}}"
                   class="layui-btn layui-btn-danger layui-btn-sm ajax-delete"><i
                        class="layui-icon layui-icon-delete"></i>删除</a>
                {{#  } }}
            </script>

            <!--状态-->
            <script type="text/html" id="switchStatus">
                {{#  if(d.role_id != 1){ }}
                <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="开启|禁用"
                       lay-filter="switchStatus" lay-href="{:url('admin/manager/upStatus')}" {{ d.status== 1
                       ? 'checked' : '' }}>
                {{#  } }}
            </script>


        </div>
    </div>
</div>

{/block}

{block name="js"}
<script>
    layui.use(['layer', 'form', 'table', 'util'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var util = layui.util;
        var admin = layui.admin;
        var username = "{:input('username')}";
        // 渲染回访表格
        var insTb = table.render({
            elem: '#tableList',
            url: "{:url('admin/manager/index')}",
            page: true,
            height: 'full-200',
            cellMinWidth: 80,
            limit: 15,
            limits: [15, 50, 100, 500, 1000, 5000, 10000, 50000, 1000000],
            size: 'lg',
            even: true,
            toolbar: true,
            title: '角色表',
            totalRow: true,
            where: {username: username},
            cols: [[
                {type: 'checkbox'},
                {type: 'numbers', title: '#'},
                {field: 'username', align: 'left', edit: 'text', style: 'color:#1E9FFF;', title: '账号'},
                {field: 'status', title: '状态', sort: true, templet: '#switchStatus'},
                {
                    align: 'center', templet: function (d) {
                        var url = d.icon;
                        return '<img src="' + url + '" class="tdImg" tb-img/>';
                    }, title: '头像', width: 300, unresize: true
                },
                {field: 'name', align: 'left', sort: true, title: '所属角色'},
                {field: 'real_name', align: 'left', edit: 'text', style: 'color:#1E9FFF;', title: '真实姓名'},
                {field: 'last_login_ip', align: 'left', title: '最后登录IP'},
                {field: 'last_login_time', align: 'center', title: '最后登录时间', width: 160},
                {align: 'center', toolbar: '#tableTBTrack', title: '操作', minWidth: 300}
            ]],
            parseData: function (res) { //res 即为原始返回的数据
                console.log(res);
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.data, //解析数据列表
                };
            }
        });


    });


</script>
{/block}